<!-- window.vue -->
<template>
    <div ref="draggableDiv" v-if="isVisible" class="window_box" @mousedown="startDrag" :style="divStyle">
        <div class='window_top'>
            <div class='window_title'>{{ params.title || localData.title }}</div>
            <button class='window_close' title='关闭' @click.stop="closeWindow"></button>
        </div>
      <div class="window_middle" :style="middleStyle">
        <slot></slot>
      </div>
      <div class="window_bottom">
        <button class="window_btn" value="关闭" @click.stop="closeWindow">关闭</button>
      </div>
    </div>
  </template>

  <script>
  import { ref, watch, nextTick } from 'vue'
  const defaultData = {
    title: '提示',
    width: 500,
    height: 300,
    drag: true
  }
  let windowDiv
  export default {
    props: {
      params: {
        type: Object,
        default: () => ({})
      }
    },
    setup () {
      const isVisible = ref(false)
      const draggableDiv = ref(null)
      watch(isVisible, async (newVal) => {
        await nextTick()
        windowDiv = draggableDiv
      })
      return {
        isVisible,
        draggableDiv
      }
    },
    data () {
      return {
        localData: { ...defaultData, ...this.params }
      }
    },
    computed: {
      divStyle () {
        return {
          width: this.localData.width + 'px',
          height: this.localData.height + 'px',
          left: (window.innerWidth - this.localData.width) / 2 + 'px',
          top: (window.innerHeight - this.localData.height) / 2 + 'px'
        }
      },
      middleStyle () {
        return {
          width: this.localData.width + 'px',
          height: this.localData.height - 30 - 30 + 'px'
        }
      }
    },
    methods: {
      openWindow () {
        this.isVisible = true
      },
      closeWindow () {
        this.isVisible = false
      },
      startDrag (event) {
        if (!this.localData.drag) {
          return
        }
        const draggableDiv = windowDiv
        // 初始化偏移值和拖拽状态
        let offsetX = 0
        let offsetY = 0
        let isDragging = false
        // 偏移值的倍率，用于调整 div 与鼠标的距离
        // 调整这个常量以改变偏移量
        const offsetMultiplier = 0
        // offsetMultiplier 是一个常量，你可以根据需要调整它的值。增大这个常量会使 div 更靠近鼠标，而减小它会让 div 离鼠标更远,根据实际情况进行调整
        // 计算初始偏移值
        offsetX = event.clientX - draggableDiv.value.getBoundingClientRect().left - draggableDiv.value.clientWidth * offsetMultiplier
        offsetY = event.clientY - draggableDiv.value.getBoundingClientRect().top - draggableDiv.value.clientHeight * offsetMultiplier
        // 处理移动事件的函数
        const moveHandler = (e) => {
            if (!isDragging) return
            // 计算新的位置
            const x = e.clientX - offsetX
            const y = e.clientY - offsetY
            // 检查新位置是否在视口内
            const viewportWidth = window.innerWidth
            const viewportHeight = window.innerHeight
            if (x >= 0 && x + draggableDiv.value.clientWidth <= viewportWidth) {
                draggableDiv.value.style.left = `${x}px`
            }
            if (y >= 0 && y + draggableDiv.value.clientHeight <= viewportHeight) {
                draggableDiv.value.style.top = `${y}px`
            }
        }
        // 处理鼠标松开事件的函数
        const upHandler = () => {
            isDragging = false
            document.removeEventListener('mousemove', moveHandler)
            document.removeEventListener('mouseup', upHandler)
        }
        // 设置拖拽状态和鼠标样式 将拖拽状态重置
        isDragging = true
        // 监听移动和松开事件
        document.addEventListener('mousemove', moveHandler)
        document.addEventListener('mouseup', upHandler)
      }
    }
  }
  </script>
  <style>
    .window_top {
        width: 100%;
        height: 30px;
        background: #040d32;
        border-bottom: 1px solid #536788;
    }
    .window_title {
        margin-left: 3px;
        line-height: 30px;
        color: #19e0f4;
        font-weight: bold;
        padding-left: 6px;
        text-align: left;
        font-size: small;
    }
    .window_close {
        width: 28px;
        height: 30px;
        position: absolute;
        border: none;
        top: 0;
        right: 0;
        background: url('~@/assets/window_btns.png') no-repeat;
        background-position: -28px 0;
        cursor: pointer;
        opacity: 0.6;
    }
    .window_box {
        position: absolute;
        user-select: none;
        border: 1px solid #37494D;
        border-radius: 2px;
        overflow: hidden;
        -webkit-app-region: no-drag;
        background-color: #040d32;
        z-index: 10; /* 确保窗口在顶层 */
    }
    .window_middle {
      width: 100%;
      overflow: auto;
      color: #fff;
      font-size: small;
    }
    .window_bottom {
      width: 100%;
      height: 30px;
      text-align: center;
      background-color: #040d32;
      border-top: 1px solid #536788;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .window_btn {
      height: 19px;
      cursor: pointer;
      font-size: 12px;
      border: 1px solid #565E60;
      border-radius: 2px;
      background-color: transparent;
      color: #1af7ff;
  }
  </style>
